<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>登录</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/sign-up-login.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/inputEffect.css" />
<link rel="stylesheet" href="css/tooltips.css" />
<link rel="stylesheet" href="css/spop.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/snow.js"></script>
<script src="js/jquery.pure.tooltips.js"></script>
<script src="js/spop.min.js"></script>
<script>	
	(function() {
		// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
		if (!String.prototype.trim) {
			(function() {
				// Make sure we trim BOM and NBSP
				var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
				String.prototype.trim = function() {
					return this.replace(rtrim, '');
				};
			})();
		}

		[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
			// in case the input is already filled..
			if( inputEl.value.trim() !== '' ) {
				classie.add( inputEl.parentNode, 'input--filled' );
			}

			// events:
			inputEl.addEventListener( 'focus', onInputFocus );
			inputEl.addEventListener( 'blur', onInputBlur );
		} );

		function onInputFocus( ev ) {
			classie.add( ev.target.parentNode, 'input--filled' );
		}

		function onInputBlur( ev ) {
			if( ev.target.value.trim() === '' ) {
				classie.remove( ev.target.parentNode, 'input--filled' );
			}
		}
	})();
	
	$(function() {	
		$('#login #login-password').focus(function() {
			$('.login-owl').addClass('password');
		}).blur(function() {
			$('.login-owl').removeClass('password');
		});
		$('#login #register-password').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #register-repassword').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #forget-password').focus(function() {
			$('.forget-owl').addClass('password');
		}).blur(function() {
			$('.forget-owl').removeClass('password');
		});
	});
	
	function goto_register(){
		$("#register-username").val("");
		$("#register-password").val("");
		$("#register-repassword").val("");
		$("#register-code").val("");
		$("#tab-2").prop("checked",true);
	}
	
	function goto_login(){
		$("#login-username").val("");
		$("#login-password").val("");
		$("#tab-1").prop("checked",true);
	}
	
	function goto_forget(){
		$("#forget-username").val("");
		$("#forget-password").val("");
		$("#forget-code").val("");
		$("#tab-3").prop("checked",true);
	}
	
	//登录
	function login(){
		var username = $("#login-username").val(),
			password = $("#login-password").val(),
			validatecode = null,
			flag = false;
		//判断用户名密码是否为空
		if(username == ""){
			$.pt({
        		target: $("#login-username"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"用户名不能为空"
        	});
			flag = true;
		}
		if(password == ""){
			$.pt({
        		target: $("#login-password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码不能为空"
        	});
			flag = true;
		}
		//用户名只能是15位以下的字母或数字
		/*var regExp = new RegExp("^[a-zA-Z0-9_]{1,15}$");
		if(!regExp.test(username)){
			$.pt({
        		target: $("#login-username"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"用户名必须为15位以下的字母或数字"
        	});
			flag = true;
		}*/
		
		if(flag){
			return false;
		}else{//登录
			//调用后台登录验证的方法
			//window.location.href="/book_manager/LoginServlet";
			//document.loginForm.submit();
			//Ajax登录方法
			var ajax;
			var loginName=document.getElementById("login-username").value;
			var loginPassword=document.getElementById("login-password").value;
			if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
			  ajax=new XMLHttpRequest();
			  }
			else{// code for IE6, IE5
			  ajax=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			 ajax.onreadystatechange=function(){
					if(ajax.readyState==4){
						if(ajax.status==200){
							var result=ajax.responseText;
							//账号密码验证成功时执行普通用户页面跳转
							if(result=="loginsucess"){
								window.location.href = "sucess.jsp"
							}
							//账号密码验证成功时执行管理员页面跳转
							if(result=="loginroot"){
								window.location.href = "index.jsp"
							}
							//账号不存在时弹出提示窗口
							if(result=="loginNull"){
								$.pt({
							        target: $("#login-username"),
							        position: 'r',
							        align: 't',
							        width: 'auto',
							        height: 'auto',
							        content:"此用户不存在"
							       });
							}
							//密码错误时弹出提示窗口
							if(result=="loginfail"){
								$.pt({
							        target: $("#login-password"),
							        position: 'r',
							        align: 't',
							        width: 'auto',
							        height: 'auto',
							        content:"密码错误"
							       });
							}
						}
					}
				}
			 ajax.open("post","LoginServlet?loginName="+loginName+"&loginPassword="+loginPassword);
			 ajax.send(null);
			return false;
		}
	}
	
	//注册
	function register(){
		var username = $("#register-username").val(),
			password = $("#register-password").val(),
			repassword = $("#register-repassword").val(),
			code = $("#register-code").val(),
			flag = false,
			validatecode = null;
		//判断用户名密码是否为空
		if(username == ""){
			$.pt({
        		target: $("#register-username"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"用户名不能为空"
        	});
			flag = true;
		}
		if(password == ""){
			$.pt({
        		target: $("#register-password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码不能为空"
        	});
			flag = true;
		}else{
			if(password != repassword){
				$.pt({
	        		target: $("#register-repassword"),
	        		position: 'r',
	        		align: 't',
	        		width: 'auto',
	        		height: 'auto',
	        		content:"两次输入的密码不一致"
	        	});
				flag = true;
			}
		}
		
		//注册页面——注册码检验
		var regExp = new RegExp("^[0-9]{1,15}$");
		if(!regExp.test(code)){
			$.pt({
        		target: $("#register-code"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"注册码只能是数字"
        	});
			flag = true;
		}
			
		if(flag){
			return false;
		}else{//注册
			
			//document.registerForm.submit();  //提交表单
			//Ajax注册方法
			var ajax;
			var registerName=document.getElementById("register-username").value;
			var registerPassword=document.getElementById("register-password").value;
			var loginNum=document.getElementById("register-code").value;
			if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
			  ajax=new XMLHttpRequest();
			  }
			else{// code for IE6, IE5
			  ajax=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			 ajax.onreadystatechange=function(){
					if(ajax.readyState==4){
						if(ajax.status==200){
							var result=ajax.responseText;
							//注册成功后弹窗
							if(result=="registersucess"){
								spop({			
									template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
									position: 'top-center',
									style: 'success',
									autoclose: 3000,
									onOpen : function(){
										var second = 2;
										var showPop = setInterval(function(){
											if(second == 0){
												clearInterval(showPop);
											}
											$('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录');
											second--;
										},1000);
									},
									onClose : function(){
										goto_login();
									}
								});
							}
							//注册失败后弹窗
							if(result=="registerfail"){
								spop({			
									template: '<h5 class="spop-title">用户已经存在</h5>',
									position: 'top-center',
									style: 'success',
									autoclose: 3000,
								});
								
							}
						}
					}
				}
			 ajax.open("post","RegisterServlet?registerName="+registerName+"&registerPassword="+registerPassword+"&loginNum="+loginNum);
			 ajax.send(null);
			 //
			
			return false;
		}
	}
	
	//重置密码
	function forget(){
		var username = $("#forget-username").val(),
			password = $("#forget-password").val(),
			code = $("#forget-code").val(),
			flag = false,
			validatecode = null;
		//判断用户名密码是否为空
		if(username == ""){
			$.pt({
        		target: $("#forget-username"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"用户名不能为空"
        	});
			flag = true;
		}
		if(password == ""){
			$.pt({
        		target: $("#forget-password"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"密码不能为空"
        	});
			flag = true;
		}
		//忘记密码页面——注册码校验
		var regExp = new RegExp("^[0-9]{1,15}$");
		if(!regExp.test(code)){
			$.pt({
        		target: $("#forget-code"),
        		position: 'r',
        		align: 't',
        		width: 'auto',
        		height: 'auto',
        		content:"注册码必须为数字"
        	});
			flag = true;
		}
		
		if(flag){
			return false;
		}else{//重置密码
			
			//ajax重置密码的方法
			var ajax;
			var resetName=document.getElementById("forget-username").value;
			var resetPassword=document.getElementById("forget-password").value;
			var loginNum=document.getElementById("forget-code").value;
			if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
			  ajax=new XMLHttpRequest();
			  }
			else{// code for IE6, IE5
			  ajax=new ActiveXObject("Microsoft.XMLHTTP");
			  }
			 ajax.onreadystatechange=function(){
					if(ajax.readyState==4){
						if(ajax.status==200){
							var result=ajax.responseText;
							//忘记密码页面检查注册码是否正确
							if(result=="loginNumfail"){
								$.pt({
							        target: $("#forget-code"),
							        position: 'r',
							        align: 't',
							        width: 'auto',
							        height: 'auto',
							        content:"注册码不正确"
							       });
							}else{
								
								//忘记密码页面——重置密码成功时弹出提示
								if(result=="resetsucess"){
									spop({			
										template: '<h4 class="spop-title">重置密码成功</h4>即将于3秒后返回登录',
										position: 'top-center',
										style: 'success',
										autoclose: 3000,
										onOpen : function(){
											var second = 2;
											var showPop = setInterval(function(){
												if(second == 0){
													clearInterval(showPop);
												}
												$('.spop-body').html('<h4 class="spop-title">重置密码成功</h4>即将于'+second+'秒后返回登录');
												second--;
												},1000);
										},
										onClose : function(){
											goto_login();
										}
									});
								}
								//忘记密码页面——用户不存在时弹出提示窗口
								if(result=="resetfail"){
									$.pt({
								        target: $("#forget-username"),
								        position: 'r',
								        align: 't',
								        width: 'auto',
								        height: 'auto',
								        content:"用户不存在"
								       });
									
								} 
							}
							
						}
					}
				}
			 ajax.open("post","ResetPassword?resetName="+resetName+"&resetPassword="+resetPassword+"&loginNum="+loginNum);
			 ajax.send(null);
			 //
			
			return false;
		}
	}

	
</script>
<style type="text/css">
html{width: 100%; height: 100%;}

body{

	background-repeat: no-repeat;

	background-position: center center #2D0F0F;

	background-color: #00BDDC;

	background-image: url(images/snow.jpg);

	background-size: 100% 100%;

}

.snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; }

</style>
</head>
<body>
	<!-- 雪花背景 -->
	<div class="snow-container"></div>
	<!-- 登录控件 -->
	<div id="login">
		<input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
		<input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
		<input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
		<div class="wrapper">
			<!-- 登录页面 -->
			<div class="login sign-in-htm">
				<form class="container offset1 loginform" name="loginForm" action="LoginServlet" method="post" >
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="login-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo " type="text" name="loginName" id="login-username" 
									autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" name="loginPassword" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a tabindex="4" class="btn pull-left btn-link text-muted" onClick="goto_forget()">忘记密码?</a>
						<a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a>
						<input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录" 
							style="color:white;"/>
					</div>
				</form>
			</div>
			<!-- 忘记密码页面 -->
			<div class="login sign-out-htm">
				<form action="#" method="post" class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="forget-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="forgetName" type="text" id="forget-username" autocomplete="off" placeholder="请输入用户名"/>
								<label class="input__label input__label--hideo" for="forget-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="loginNum" type="text" id="forget-code" autocomplete="off" placeholder="请输入注册码"/>
								<label class="input__label input__label--hideo" for="forget-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="forgetPassword" type="password" id="forget-password" placeholder="请重置密码" />
								<label class="input__label input__label--hideo" for="forget-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
						<input class="btn btn-primary" type="button" onClick="forget()" value="重置密码" 
							style="color:white;"/>
					</div>
				</form>
			</div>
			<!-- 注册页面 -->
			<div class="login sign-up-htm">
				<form action="RegisterServlet" method="post" name="registerForm" class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="register-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="registerName" type="text" id="register-username" 
									autocomplete="off" placeholder="请输入用户名" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="registerPassword" type="password" id="register-password" placeholder="请输入密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="yesPassword" type="password" id="register-repassword" placeholder="请确认密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" name="loginNum" type="text" id="register-code" autocomplete="off" placeholder="请输入注册码"/>
								<label class="input__label input__label--hideo" for="register-code">
									<i class="fa fa-fw fa-wifi icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
						<input class="btn btn-primary" type="button" onClick="register()" value="注册" 
							style="color:white;"/>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div style="text-align:center;">
<p>小组：<a href="#" target="_blank">哪个组</a></p>
</div>
</body>
</html>